<!doctype html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="xuejianxinokok">
	<title>V1测试</title>
	<link rel="stylesheet" href="resources/css/bootstrap.min.css" />
	<link rel="stylesheet" href="resources/css/dashboard.css" />
	<meta name="theme-color" content="#7952b3">


	<style>
		.bd-placeholder-img {
			font-size: 1.125rem;
			text-anchor: middle;
			-webkit-user-select: none;
			-moz-user-select: none;
			user-select: none;
		}

		@media (min-width: 768px) {
			.bd-placeholder-img-lg {
				font-size: 3.5rem;
			}
		}

		.b-example-divider {
			height: 3rem;
			background-color: rgba(0, 0, 0, .1);
			border: solid rgba(0, 0, 0, .15);
			border-width: 1px 0;
			box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
		}

		.b-example-vr {
			flex-shrink: 0;
			width: 1.5rem;
			height: 100vh;
		}

		.bi {
			vertical-align: -.125em;
			fill: currentColor;
		}
	</style>



</head>

<body>
	<div id="app">

		<!--参考文档 https://v5.bootcss.com/docs/5.1/getting-started/introduction/-->
		<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
			<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
			<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
				data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
			<div class="navbar-nav">
				<div class="nav-item text-nowrap">
					<a class="nav-link px-3" href="#">Sign out</a>
				</div>
			</div>
		</header>

		<div class="container-fluid">
			<div class="row">




				<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
					<div class="position-sticky pt-3">
						<ul class="nav flex-column">
							<li class="nav-item">
								<a class="nav-link active" aria-current="page" href="#">
									<span data-feather="home"></span>
									Dashboard
								</a>
							</li>

							<li class="nav-item">
								<a class="nav-link" href="http://localhost:8080/swagger" target="_blank">
									<span data-feather="bar-chart-2"></span>
									Swagger
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="https://v5.bootcss.com/docs/5.1/getting-started/introduction/"
									target="_blank">
									<span data-feather="layers"></span>
									Bootstrap文档
								</a>
							</li>

							<li class="nav-item">
								<a class="nav-link" href="https://feathericons.com/" target="_blank">
									<span data-feather="image"></span>
									feather图标库
								</a>
							</li>
							<!--
			  <li class="nav-item">
				<a class="nav-link" href="#">
				  <span data-feather="shopping-cart"></span>
				  Products
				</a>
			  </li>
			  <li class="nav-item">
				<a class="nav-link" href="#">
				  <span data-feather="users"></span>
				  Customers
				</a>
			  </li>
			  -->
						</ul>


					</div>
				</nav>

				<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
					<div
						class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
						<h1 class="h2">设备列表 &nbsp;【当前在线{{onlineCount}}】
						</h1>
						<div class="btn-toolbar mb-2 mb-md-0">
							<div class="btn-group me-2">
								<button type="button" class="btn btn-sm btn-outline-secondary"
									@click="showDialogMsg('_ALL_')">广播消息</button>
							</div>

						</div>
					</div>

					<div class="table-responsive">
						<table class="table table-striped table-sm table-hover">
							<thead>
								<tr>
									<th scope="col">ID</th>
									<th scope="col">用户</th>
									<th scope="col">电话</th>
									<th scope="col">购买日期</th>
									<th scope="col">购买电话数量</th>
									<th scope="col">最近购买日期</th>
									<th scope="col">用户购卡顺序</th>
									<th scope="col">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(o,i) in list" :key="o.id">
									<td>{{o.id}}</td>
									<td>{{o.username}}</td>
									<td>{{o.tel}}</td>
									<td>{{o.create_time}}</td>
									<td>{{o.buy_num}}</td>
									<td>{{o.buy_time}}</td>
									<td>{{o.buy_time}}</td>
									<td>
										<a href="#" class="link-info" @click="showDialogMsg(o.mid)"
											v-if="o.isOnline">消息</a>&nbsp;
										<a href="#" class="link-info" @click="showDialogEdit(o)">编辑</a>&nbsp;
										<a href="#" class="link-info" @click="showDialogView(o.id)">查看</a>&nbsp;
<!--										<a :href="'status.html?mid='+o.mid" class="link-info" target="_blank">详情</a>-->
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<page :total="total"
						  @on-page-size-change="changePageSize"
						  @on-change="changePage"
					></page><br />
<!--					<iframe src="page.html" height="200" width="600"></iframe>-->
					<btn></btn>
					1.加载组件，一个html没办法引入其他html或者vue文件，所以就写成了page.js，这个是可以公用的<br/>
<!--					1、加载组件使用的httpVueloader，但是vue3有点问题，不知道为啥报错，换成vue2了<br/>-->
					2、列表是get请求、查看是路径传参、编辑走的post的body<br/>
					3、body传值需要使用bodyParser的包，不然获取不到参数<br/>
				</main>
			</div>
		</div>

		<div class="modal fade " id="dialogMsg">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">发送消息</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<form>
							<div class="mb-3">
								<label for="recipient-name" class="col-form-label">类型:</label>
								<select class="form-select" v-model="msg.type">
									<option value="echo">echo</option>
									<option value="cmd1">cmd1</option>
									<option value="cmd2">cmd2</option>
									<option value="cmd3">cmd3</option>
								</select>
							</div>
							<div class="mb-3">
								<label for="message-text" class="col-form-label">内容:</label>
								<textarea class="form-control" id="message-text" v-model="msg.content"></textarea>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" @click="sendMsg">发送</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade " id="dialogEdit">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">编辑</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<form>
							<div class="mb-3">
								<label for="name" class="col-form-label">数据:</label>{{editVo}}
								<br />点击保存按钮会走接口
							</div>

						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" @click="saveEdit">保存</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade " id="dialogView">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">查看</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<form>
							<div class="mb-3">
								<label for="name" class="col-form-label">数据:</label>
								{{viewVo}}
							</div>

						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<!--						<button type="button" class="btn btn-primary" @click="saveEdit">保存</button>-->
					</div>
				</div>
			</div>
		</div>

	</div>
	<script src="resources/js/http.js"></script>
	<script src="resources/js/vue.global.prod.js"></script>
<!--	<script src="./main.js"></script>-->
	<script src="./Page.js"></script>
	<script src="./PageWrapper.js"></script>
<!--	<script src="resources/js/vue.min.js"></script>-->
	<!-- vue3使用这个loader有报错  就换vue2了 -->
<!--	<script src="resources/js/httpVueLoader.js"></script>-->
	<script src="resources/js/bootstrap.bundle.min.js"></script>
	<script src="resources/js/feather.min.js"></script>

	<script>
		/*渲染图标  feather:false */
		(function () {
			'use strict'
			feather.replace({ 'aria-hidden': 'true' })

		})()
		let dialogMsg = null
		let dialogEdit = null
		let dialogView = null
		// 使用httpVueLoader
		// Vue.use(httpVueLoader);
		let param = {
			data() {
				return {
					//列表数据
					list: [],
					total: 0,
					param:{
						pageSize: 2,
						pageNum: 1,
					}
					//要发送的消息
					, msg: {
						target: null,
						type: 'echo',
						content: ''
					}
					//当前编辑对象
					, editVo: {
					},
					viewVo:{}
					//在线总数
					, onlineCount: 0
				}
			},

			components: {
				// 'page': 'url:./page.vue'
				// 'page': httpVueLoader('./page.vue')
			},
			mounted: function () {
				dialogMsg = new bootstrap.Modal(document.getElementById('dialogMsg'), {})
				dialogEdit = new bootstrap.Modal(document.getElementById('dialogEdit'), {})
				dialogView = new bootstrap.Modal(document.getElementById('dialogView'), {})
				this.queryList()
				// setInterval(() => {
				// 	this.isOnline()
				// }, 10 * 1000)
			},

			methods: {

				showDialogMsg(mid) {
					this.msg = { target: mid, type: 'echo' }
					dialogMsg.show()
				},
				showDialogEdit(selectVo) {
					this.editVo = selectVo
					dialogEdit.show()
				},
				sendMsg() {
					$http.post('/v1/heartbeat/sendMsg', this.msg).then(res => {
						console.log(res)
						dialogMsg.hide()
					}).catch(err => {
						dialogMsg.hide()
					})
				},
				saveEdit() {
					// let { mid, name } = this.editVo
					$http.post('/userTel/edit', this.editVo).then(res => {
						dialogEdit.hide()
					}).catch(err => {
						dialogEdit.hide()
					})
				},
				changePage(pageNum){
					const that = this;
					that.param.pageNum = pageNum;
					that.queryList();

				},
				changePageSize(pageSize){
					const that = this;
					that.param.pageNum = 1;
					that.param.pageSize = pageSize;
					that.queryList();
				},
				showDialogView(id){
					const that = this;
					$http.get(`/userTel/info/${id}`).then(res => {
						// console.log(res)
						this.viewVo = res.data
						dialogView.show()
					})
				},
				queryList() {
					const that = this;
					$http.get(`/userTel/listPage?pageNum=${that.param.pageNum}&pageSize=${that.param.pageSize}`).then(res => {
						// console.log(res)
						[that.total, that.list] = [res.data.total, res.data.rows];
					})
				},
				isOnline() {
					let mids = this.list.map(({ mid }) => { return mid });
					$http.post('/v1/heartbeat/isOnline', mids).then(res => {
						let data = res.data
						this.onlineCount = data.count
						this.list.forEach(function (o) {
							o.isOnline = data[o.mid] || false
						})
					}).catch(err => {
					})
				}
			}
		}
		const app = Vue.createApp(param);
		new PageWrapperComponent(app); // 引入组件
		app.mount('#app');
	</script>
</body>

</html>